<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-menu @select="handleSelect" :unique-opened="true">
        <el-menu-item index="/index/home">首页</el-menu-item>
        <el-sub-menu index="/index/manager">
          <template #title>
            <el-icon><User /></el-icon>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/manager">用户信息</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/index/echars">用户访问量图表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Goods /></el-icon>商品管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/goods">商品管理页面</el-menu-item>
            <el-menu-item index="/index/shopgroup">商品分类数据图</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Stopwatch /></el-icon>订单管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/order"> 订单数据详情 </el-menu-item>
            <el-menu-item index="/index/shuju"> 订单数据分析 </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Promotion /></el-icon>地址管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/address">地址列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Edit /></el-icon>库存管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/stock">库存总览</el-menu-item>
            <el-menu-item index="/index/amend">库存更改</el-menu-item>
            <el-menu-item index="/index/mo-search">库存查询</el-menu-item>
            <el-menu-item index="/index/addmounted">新增商品库存</el-menu-item>
            <el-menu-item index="/index/hint">补货提示页面</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </el-container>
</template>
<script setup>
import { useRouter } from "vue-router";
var $router = useRouter();
var handleSelect = (path) => {
  $router.push(path);
};
</script>
<style lang="scss" >
.el-sub-menu__title {
  i {
    &:nth-child(1) {
      margin-right: 20px;
    }
  }
}
.el-menu-item {
  padding-left: 66px !important;
  color: white;
}
.el-menu-item:hover {
  color: lightseagreen;
  font-weight: bolder;
}
.el-sub-menu__title:hover {
  color: lightseagreen;
  font-weight: bolder;
}
li .el-menu-item {
  padding-left: 60px !important;
}
.el-menu {
  background-color: #59646c;
}

.el-aside {
  background-color: #59646c;
}
.el-sub-menu__title {
  color: white;
}
</style>